﻿@{
    ViewBag.Title = "浏览排行";
}
<link href="~/bootstrap-paginator/css/bootstrap.min.css" rel="stylesheet" />
<script src="~/bootstrap-paginator/js/bootstrap-paginator.js"></script>
<link href="~/Content/normalize.css" rel="stylesheet" />
<link href="~/Content/htmleaf-demo.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href="~/Content/style.css" rel="stylesheet" />
<style>
    .border {
        width: 400px;
        float: left;
        margin-bottom: 15px;
        text-align: center;
        display: block;
    }

    .img {
        width: 350px;
        display: block;
        padding-left: 15px;
    }

    a {
        text-decoration: none;
    }
</style>

<script type="text/javascript">
    $(function () {
        Search($('#searchText').val());

        $('#searchBtn').click(function () {

            Search($('#searchText').val());
        });
    })


    function Search(keyword) {
        $.ajax({
            url: '../api/MMView/GetInfoPage',
            type: 'GET',
            asyn: false,
            data: { keyword: keyword, order: 'scanCount',pageIndex: 1, pageSize: 10 },
            success: function (pageData) {
                var pageList = pageData.list;
                var html = "";
                for (var i = 0; i < pageList.length; i++) {
                    html += '<div class="border" id="' + pageList[i].memo + '" onclick="ClickDetail(this)"><h5>' + pageList[i].title + '</h5><img src="' + pageList[i].src + '" class="img">';
                    html += '<div class="border_txt"><span>浏览（' + pageList[i].scanCount + '）</sapn><span>爬取时间：' + pageList[i].scrapyTime + '</span></div></div>';
                }
                $('.main').html(html);

                var currentPage = 1;
                var pageCount = parseInt(pageData.count / 10);

                if (pageData.count % 10 != 0)
                    pageCount = pageCount + 1;

                var options = {
                    bootstrapMajorVersion: 3, //版本
                    currentPage: currentPage, //当前页数
                    totalPages: pageCount, //总页数
                    size: "small",
                    itemTexts: function (type, page, current) {
                        switch (type) {
                            case "first":
                                return "首页";
                            case "prev":
                                return "上一页";
                            case "next":
                                return "下一页";
                            case "last":
                                return "末页";
                            case "page":
                                return page;
                        }
                    },//点击事件，用于通过Ajax来刷新整个list列表
                    onPageClicked: function (event, originalEvent, type, page) {
                        $.ajax({
                            url: '../api/MMView/GetInfoPage',
                            type: 'GET',
                            asyn: false,
                            data: { keyword: keyword, order: 'scanCount', pageIndex: page, pageSize: 10 },
                            dataType: 'Json',
                            success: function (pageData) {
                                var pageCount = parseInt(pageData.count / 10);

                                if (pageData.count % 10 != 0)
                                    pageCount = pageCount + 1;

                                options.totalPages = pageCount;
                                var pageList = pageData.list;
                                var html = "";
                                for (var i = 0; i < pageList.length; i++) {
                                    html += '<div class="border" id="' + pageList[i].memo + '" onclick="ClickDetail(this)"><h5>' + pageList[i].title + '</h5><img src="' + pageList[i].src + '" class="img"></div>';
                                }
                                $('.main').html(html);
                            }
                        });
                    }
                }

                $('#pager').bootstrapPaginator(options);
            }
        });
    }

    function ClickDetail(div) {
        id = $(div)[0].id;
        window.location.href = "../Home/Contact?id=" + id;
    }

</script>
<div class="search d1">
    <form style="float:left;">
        <input id="searchText" style="margin-top:25px" type="text" placeholder="请输入你想看的MM...">
        <button type="button" style="margin-top:25px" id="searchBtn"></button>
    </form>
</div>
<div class="main" style="display:inline-block">

</div>
<div>
    <ul id="pager"></ul>
</div>
